<template>
  <div class='img-box flex both-100 flex-bcenter'>
    <div class="img-container">
      <div class="point-list">
        <!-- <img v-for="point in pointList" class="mark-icon" :src="inFilePrefix + formData.markIcon" :key="point.deviceTypeId" alt="">
         -->
      </div>
      <el-skeleton class="image-preview both-100" :loading="loading">
        <template slot="template">
          <el-skeleton-item class="both-100" variant="image" />
        </template>
        <template>
          <div class="mark-icon pinit" v-for="(point,index) in pointList" :style="{ transform: getTransform(point) }" :key="point.deviceTypeId + index" @click="handlePoint(point)"></div>
          <el-image class="img both-100" :src="inFilePrefix + imgUrl" lazy fit></el-image>
        </template>
      </el-skeleton>
    </div>
    <!-- 弹窗 详情 -->
    <el-dialog title="设备详情" class="large_dialog" :visible.sync="dialogVisibleDetail" top="10px" :close-on-click-modal="false" :key="Math.random()">
      <DeviceDetail :details="descData" :dictMap="dict" :key="Math.random()"></DeviceDetail>
    </el-dialog>
    <!-- 弹窗 详情 over -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getProjectPointPic } from '@/api'
import { listDeviceData } from '@/api/system/device/management';
import DeviceDetail from '@/views/dataMonitoring/detail'
export default {
  dicts: ['device_status', 'device_enable_status', 'device_alarm_notice_status', 'device_control_status', 'device_indoor', 'device_communicate_type', 'device_problem'],
  components: {
    DeviceDetail
  },
  data () {
    return {
      loading: true,
      imgUrl: '',
      pointList: [],
      /// 详情数据
      descData: {},
      // 详情弹窗显示隐藏
      dialogVisibleDetail: false,
    };
  },
  computed: {
    ...mapState('config', ['inFilePrefix'])
  },
  watch: {
    imgUrl: {
      handler (val) {
        this.loading = true
      }
    }
  },
  methods: {
    async show (deptId, projectPointPicId) {
      const params = {
        deptId,
        projectPointPicId
      }
      try {
        const [picResponse, deviceResponse] = await Promise.all([
          getProjectPointPic(projectPointPicId),
          listDeviceData(params)
        ])
        if (picResponse.code === 200 && deviceResponse.code === 200) {
          console.log(picResponse)
          this.initImg(picResponse.data.picUrl)
          this.initProjectPointPosition(deviceResponse.rows)
        }
      } catch (error) {
        console.log(error)
      }
    },
    initImg (url) {
      this.imgUrl = url
      setTimeout(() => {
        this.loading = false
      }, 100)
    },
    initProjectPointPosition (data) {
      this.pointList = data.map(item => {
        return {
          ...item,
          xxx: '123'
        }
      })
      console.log(this.pointList)
    },
    // 获取设备图标的transform
    getTransform (point) {
      if (typeof point.positionX === 'string' || typeof point.positionY === 'string')
        return `translate(${point.positionX}px, ${point.positionY}px)`
    },
    handlePoint (point) {
      this.descData = point
      this.dialogVisibleDetail = true
    },

  },
  created () {

  },
  mounted () {

  }
}
</script>

<style lang='less' scoped>
.img-box {
  .img-container {
    width: 720px;
    height: 400px;
    box-sizing: content-box;
    .point-list {
    }
    .image-preview {
      /deep/.el-skeleton {
        width: 100%;
        height: 100%;
      }
      .img {
        z-index: 1;
      }
      .mark-icon {
        z-index: 2;
        width: 15px;
        height: 15px;
        background-color: black;
        position: absolute;
      }
    }
  }
}
</style>